import React, { useCallback, useContext } from 'react';
import cls from 'classnames';
import { Pagination, PaginationProps, Select } from 'antd';
import { Option } from '../../shared';
import { useInbizPrefixCls } from '../../hooks';
import { InBizTableRefCtx } from '../../context';
import { PageInfo } from '../../interfaces';

interface TablePaginationProps {
  onPageChange: (pageInfo: PageInfo) => void;
  pagination: PaginationProps;
}

const TablePagination = (props: TablePaginationProps) => {
  const { pagination, onPageChange } = props;
  const { searchRef } = useContext(InBizTableRefCtx);
  const paginationPrefixCls = useInbizPrefixCls('subTable-pagination');

  const updatePageInfo = (pageInfo: PageInfo) => {
    searchRef.current = {
      ...searchRef.current,
      pageInfo,
    };
  };

  const onChange = useCallback((page, pageSize: number) => {
    updatePageInfo({ current: page, pageSize });
    onPageChange({ current: page, pageSize });
  }, []);

  return (
    <div className={cls(paginationPrefixCls)}>
      <Select
        value={pagination.pageSize}
        options={Option().pageSize}
        style={{ width: 100 }}
        onChange={(value) => onChange(1, value)}
      />
      <Pagination {...pagination} onChange={onChange} />
    </div>
  );
};

export default React.memo(TablePagination);
